<script setup lang="ts">
import {inject, reactive, ref, type Ref} from "vue";
import {LockOutlined, UserOutlined} from "@ant-design/icons-vue";
import type {FormState} from "./data";
import {postUserForgetReset} from "@/apis/student";
import {type FormInstance, message} from "ant-design-vue";
import type {Rule} from "ant-design-vue/es/form";

const go:any = inject('go')
const formRef:Ref = ref<FormInstance>();
const formState = reactive<FormState>({
  account: '',
  code: '',
  codeinline:'',
  reset: '',
});
const onFinish = (values: FormState) => {
  const {account, code, codeinline, reset} = values
  //发送请求，请求登录
  const reserPossword: Promise<boolean> = postUserForgetReset()
};
const onFinishFailed = ({errorFields}: any) => {
  message.error(`错误：${errorFields.map(({name}:any):string => name)}`,1)
};
//自定义校验规则
const validateName = async (_rule: Rule, value: string) => {
  if (!value){
    return Promise.reject('请输入账户');
  }
};
const validatePass = async (_rule: Rule, value: string) => {
  if (!value){
    return Promise.reject('请输入密码');
  }
};
const rules: Record<string, Rule[]> = {
  username: [{ required: true, validator: validateName, trigger: 'change' }],
  password: [{ required: true, validator: validatePass, trigger: 'change' }],
};
</script>

<template>
  <a-flex justify="end">
    <a-button type="link" @click="go('/login')">返回</a-button>
  </a-flex>
  <div class="form-body">
    <a-form
        ref="formRef"
        :model="formState"
        :rules="rules"
        name="normal_login"
        class="login-form"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
    >
      <a-form-item
          label="账号"
          name="username"
          has-feedback
      >
        <a-input v-model:value="formState.account">
          <template #prefix>
            <UserOutlined class="site-form-item-icon" />
          </template>
        </a-input>
      </a-form-item>

      <a-form-item
          label="密码"
          name="password"
          has-feedback
      >
        <a-input-password v-model:value="formState.codeinline">
          <template #prefix>
            <LockOutlined class="site-form-item-icon" />
          </template>
        </a-input-password>
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit" class="login-form-button">
          登 录
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<style scoped lang="scss">
.login-form {
  max-width: 300px;
  margin: 0 auto;
}
.login-form-forgot {
  float: right;
}
.login-form-button {
  width: 100%;
}
.form-body{
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  padding: 1rem;
  display: flex;
  align-items: center;
}
</style>